<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue'
import { useAppStore } from '@/stores/app'
import { getDeviceType, useDeviceDetection } from '@/utils/device'

const appStore = useAppStore()

let cleanupDeviceDetection = null

onMounted(() => {
  // 初始化设备类型
  appStore.setDevice(getDeviceType())

  // 监听设备变化
  cleanupDeviceDetection = useDeviceDetection((deviceType) => {
    appStore.setDevice(deviceType)
  })
})

onUnmounted(() => {
  if (cleanupDeviceDetection) {
    cleanupDeviceDetection()
  }
})
</script>

<style>
#app {
  height: 100vh;
  width: 100vw;
}
</style>
